<template>
  <div class="ele-body">
    <el-card shadow="never"
             body-style="padding: 0;">
      <div class="ele-cell ele-cell-align-top ele-user-message">
        <div class="ele-cell-content"
             style="overflow-x: hidden">
          <transition name="slide-right"
                      mode="out-in">
            <sys-base v-if="active === 'base'" />

          </transition>

        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import SysBase from './components/sys-base.vue';
export default {
  name: 'index',
  components: { SysBase },
  data () {
    return {
      // 导航选中
      active: 'base',
      // 通知未读数量
      unReadNotice: 0,
      // 私信未读数量
      unReadLetter: 0,
      // 代办未读数量
      unReadTodo: 0
    };
  },
  computed: {
    // 小屏幕水平导航
    mode () {
      return this.$store.state.theme.screenWidth < 768
        ? 'horizontal'
        : 'vertical';
    }
  },
  watch: {
    $route: {
      handler (route) {
        if (route.path === '/common/sys') {
          if (route?.query?.type) {
            //let arr = this.queryUnReadNum();
            this.active = route?.query?.type;
          }
        }
      },
      immediate: true
    }
  },
  created () {
    this.queryUnReadNum();
  },
  methods: {
    /* 查询未读数量 */
    queryUnReadNum () {

    }
  }
};
  </script>
  
  <style lang="scss" scoped>
.ele-user-message ::v-deep .el-menu {
  width: 151px;
  flex-shrink: 0;
}

.ele-user-message .ele-cell-content {
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.ele-user-message .ele-badge-static {
  margin-right: 10px;
}

@media screen and (min-width: 768px) {
  .ele-user-message ::v-deep .el-menu {
    .el-menu-item {
      text-align: right;
    }

    .el-menu-item:first-child {
      margin-top: 15px;
    }
  }
}

@media screen and (max-width: 768px) {
  .ele-user-message {
    display: block;
  }

  .ele-user-message ::v-deep .el-menu {
    width: auto;
    text-align: center;
    white-space: nowrap;
    overflow: auto;

    .el-menu-item {
      height: 45px;
      line-height: 45px;
      padding: 0 5px;
      display: inline-block;
      float: none;
    }
  }

  .ele-user-message .ele-badge-static {
    margin-left: 3px;
  }
}
</style>
  